<template>
  <el-header>
    <section class="app-sidebar header-left" :class="{ 'app-sidebar-narrow': sidebarSwitch }">
      <div :class="{ 'has-logo': showLogo }" class="app-sidebar-wrap">
        <logo v-if="showLogo" :collapse="sidebarSwitch" />
        <!-- <el-scrollbar wrap-class="scrollbar-wrapper"> -->
        <el-menu
          :default-active="menuActive"
          :collapse="sidebarSwitch"
          background-color="#fff"
          text-color="#303133"
          class="app-sidebar-vertical"
          :unique-opened="false"
          :collapse-transition="false"
          mode="horizontal"
        >
          <sidebar-item
            v-for="route in menus"
            :key="route.path"
            :item="route"
            :base-path="currentRoute + '/' + route.path"
          />
        </el-menu>
        <!-- </el-scrollbar> -->
      </div>
    </section>
    <section class="header-right">
      <i @click="pageRefresh" class="header-func el-icon-refresh" />
    </section>
  </el-header>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import Logo from './components/Logo'
import SidebarItem from './components/SidebarItem'
// import variables from '@/styles/variables.scss'

export default {
  name: 'SidebarIndex',
  components: { SidebarItem, Logo },
  data () {
    return {
      menus: [],
      currentRoute: ''
    }
  },
  created () {
    this.currentRoute = this.$route.path.split('/')[1]
    this.menus = this.permissionList.filter(item => item.name === '/' + this.currentRoute)[0].children
  },
  computed: {
    ...mapState({
      sidebarSwitch: state => !state.sidebarSwitch,
      menuActive: state => state.menuActive
      // permissionMenuList: state => state.user.permissionList
    }),
    ...mapGetters(['permissionList']),
    activeMenu () {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    showLogo () {
      return false
    }
  },
  methods: {
    pageRefresh () {
      window.location.reload()
    }
  }
}
</script>
<style lang="scss" scoped>
$bkColor: #333;
.el-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto !important;
  padding: 0;
  background-color: #fff;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  .header-func {
    font-size: 0.22rem;
    color: #7e8bab;
    cursor: pointer;
  }
  .header-left {
    padding-left: 0.2rem;
  }
  .header-right {
    display: flex;
    align-items: center;
    .header-func {
      margin-right: 0.2rem;
    }
  }
}
</style>
